<template>
  <a-card hoverable class="order-card" style="width: 100%">
    <a-row :gutter="4">
      <a-col :span="15">
        <div>系统单号：{{ props.order.orderNo }} </div>
      </a-col>
      <a-col :span="9">
        <div
          >订单状态：<a-tag :color="props.order.orderStatus == '0' ? 'blue' : 'red'">{{
            props.order.orderStatus == '0' ? '等待抢单' : '订单已失效'
          }}</a-tag></div
        >
      </a-col>
      <a-col :span="24">
        <div>商户单号：{{ props.order.outTradeNo }}</div>
      </a-col>
      <a-col :span="7">
        <div
          >代付金额：<span style="color: #f50">{{ props.order.amount }}</span></div
        >
      </a-col>
      <a-col :span="8">
        <div
          >收款姓名：<span style="color: #f50">{{ props.order.payName }}</span></div
        >
      </a-col>
      <a-col :span="24">
        <div
          >收款账号：<span style="color: #f50">{{ props.order.payAccount }}</span></div
        >
      </a-col>
      <a-col :span="24">
        <div>通道类型：{{ props.order.codeTitle }}</div>
      </a-col>
      <a-col :span="24">
        <div>银行名称：{{ props.order.bankName }}</div>
      </a-col>
      <a-col :span="20">
        <div
          >创建时间：{{ dayjs(props.order.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div
        >
      </a-col>
      <a-col :span="4"
        ><a-button size="small" :disabled="timerout" @click="$emit('onChecked')" type="primary">{{
          timerout ? '订单已失效' : '我要抢单'
        }}</a-button></a-col
      >
    </a-row>

    <a-progress
      :percent="percent"
      :show-info="false"
      :status="countdown > 0 ? 'active' : 'exception'"
    />

    <div v-if="countdown > 0" class="subtitle"
      >距离抢单截至倒计时 {{ countdown }} 秒，请在抢单后立即付款</div
    >
    <div v-else class="subtitle">订单已失效</div>
  </a-card>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs';
  import { ref, onMounted, onUnmounted } from 'vue';
  import { getReminderInfo } from '@/utils/helper';

  const props = defineProps({
    order: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  let timer = null;
  const timerout = ref(false);
  const countdown = ref(0);
  const percent = ref(0);
  const dialog = ref('');

  const timerFunc = () => {
    if (countdown.value <= 0) {
      timerout.value = true;
    } else {
      countdown.value--;
      percent.value = (1 - countdown.value / props.order.paymentListTime) * 100;
    }
  };

  onMounted(async () => {
    dialog.value = await getReminderInfo('payment_order_bottom');
    countdown.value = props.order.paymentListTime;
    timer = setInterval(timerFunc, 1000);
  });
  onUnmounted(() => {
    clearInterval(timer);
  });
</script>

<style lang="less" scoped>
  .order-card {
    font-weight: 500;
  }

  .subtitle {
    color: rgb(150 150 150);
    font-weight: 400;
    text-align: center;
  }
</style>
